<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Coder-nav</title>
    <script src="/js/jquery/jquery.js"></script>
    <script src="/js/jquery/adsorb.js"></script>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/axios.js"></script>
    <script src="/js/vue/element-ui.js"></script>
    <script src="/js/util.js"></script>
    <script src="/js/vditor/vditor.js"></script>
    <style>
        @import url("/css/vue/element-ui.css");
        @import url("/css/vditor/vditor.css");
    </style>
    <style>
        #code::-webkit-scrollbar {
            display: none;
        }
        h4 {
            color: darkslategray;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <!-- vditor -->
            <div id="memo">
                <div id="vditor"></div>
            </div>
        </el-main>
    </el-container>
</div>
<script th:inline="javascript">
    var Main = {
        data() {
            return {
                vditorModeList: [], vditor: null, folderDrawer: false,
            }
        },
        mounted:function() {
            var pageHeight = innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
            var pageOffset = pageHeight * 8 / 100;
            this.vditor = new Vditor('vditor', {
                mode: 'ir',
                outline: {
                    enable: true,
                    position: 'right',
                },
                preview: {
                    mode: 'both',
                    hljs: {
                        enable: true,
                        lineNumber: false,
                    },
                },
                height: pageHeight - pageOffset,
                after: () => {
                    var buttonList = document.getElementsByTagName('button');
                    for(var i = 0; i < buttonList.length; i++) {
                        var button = buttonList[i];
                        if(button.getAttribute('data-type') === 'preview') {
                            button.click();
                        }
                        if(button.getAttribute('data-type') === 'fullscreen') {
                            button.click();
                        }
                    }
                    document.getElementsByClassName('vditor-toolbar')[0].style.display = 'none';
                    // 获取内容
                    axios.get('/memo/shareInfo', {
                        params: {
                            userId: '%s',
                            shareId: '%s',
                        }
                    }).then((response) => {
                        this.vditor.setValue(response.data.data.context);
                    }).catch((response) => {
                        window.location.href = '/404';
                    });
                }
            });
        },
        methods: {}
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</body>
</html>